<!DOCTYPE html>
<html>
<head>
    <title>提交订单</title>
    <meta name="keywords" content="" />
    <meta name="description" content="">
    <include file="public@head" />

    <style>
        .order{  text-align: center;  background: #fff;  width: 600px;  padding: 0 30px;  margin: 6% auto;  overflow: hidden;  border-radius: 10px;  }
        .order li{ margin-bottom:20px; position:relative;text-align: left;}
        .order li select.srk{height:45px; line-height:45px; width:100%; border:1px solid #ddd; padding-left:10px; font-size:14px; border-radius:5px;  transition:all .3s ease; padding-left:100px;}
        .order li input.srk{height:45px; line-height:45px; width:100%; border:1px solid #ddd; padding-left:10px; font-size:14px; border-radius:5px;  transition:all .3s ease; padding-left:100px;}
        .order li input.checkbox{line-height:45px; border:1px solid #ddd; padding-left:10px; font-size:14px; border-radius:5px;  transition:all .3s ease; margin-left:100px;}
        .order li input.srk:focus{border:1px solid #A90526; box-shadow:0px 0px 20px #ececec;}
        .order li#award input[type="checkbox"]:checked{width:20px;height:20px;}
        .order li input[type="radio"]:checked{width:20px;height:20px;}
        .order li a.sjyzm{position:absolute; right:8px; top:8px; background:#E4CCAD; border:none; height:30px; line-height:30px; color:#fff; padding-left:10px; padding-right:10px; border-radius:5px; cursor:pointer;}
        .order li a.sjyzm:hover{background:#666;}
        .order li a.order-btn{display:inline-block;width:150px; height:50px; line-height:50px; background:#A90526; color:#fff; border:none; border-radius:100px; font-size:16px; cursor:pointer; box-shadow: 0px 10px 20px #FDD9E0;}
        .order li a.order-btn:hover{background:#CC062E;}
        .order li .txyzm{position:absolute; right:8px; top:8px; width:70px;}
        .order li i{position:absolute; font-family:iconfont; line-height:50px; width:100px; text-align:center; font-size:16px; color:#ccc;}
        .order li span.text{ overflow:hidden;}
        #calculate_money{margin:50px 0;text-align: right;}
        #calculate_money span{float:right;padding-bottom:20px;line-height:1.8;}
        #calculate_money span em{display:inline-block;width:70px;}
        #calculate_money span em.cal_total{color:#CC062E;font-weight:bolder;font-size:18px}
        #order_wrap{display: none;}
        .wrong-attention{color:#CC062E;}
        .wrong-attention b{width:18px;height:18px;line-height: 18px;font-size: 16px;}


    </style>
    <link href="__TMPL__/public/html_assets/css/seatcss.css" rel="stylesheet">


</head>

<body class="body-white">
<include file="public@nav" />
<div class="container " style="min-height: 475px;">
    <!--步骤 -->
    <div class="step wrap">
        <ul>
            <li class="now">1、填写订单</li>
            <li>2、选择座位</li>
            <li>3、支付订单</li>
        </ul>
    </div>
    <!--步骤 -->

    <form action="{:url('Order/product_order')}" class="js-ajax-form" method="post">
        <div class="order wrap">
            <ul id="order_list">
                <li>
                    <i>选择孩子</i>
                    <select name="student_id" id="student_id" class="srk">
                        <option value="0">请选择孩子</option>
                        <foreach name="student_data" item="vo">
                            <option value="{$vo.id}">
                                {$vo.name}
                            </option>
                        </foreach>
                    </select>
                </li>
                <li>
                    <i>班级</i>
                    <input class="srk" type="text" readonly value="{$data.name}" >
                </li>
                <li>
                    <i>开课时间</i>
                    <input class="srk" type="text" readonly value="{:date('Y-m-d ',$data.start_lesson_time)}">
                </li>
                <li>
                    <i>上课时段</i>
                    <input class="srk" type="text" readonly value="{$data.class_start_week}">
                </li>
                <li>
                    <i>课程价格</i>
                    <input class="srk" type="text" readonly name="total_price" value="{$data.lesson_price}">
                </li>
                <li>
                    <i>教材费</i>
                    <input class="srk" type="text" readonly  value="{$data.incidental_price}">
                </li>
                <li>
                    <i>报名费</i>
                    <input class="srk" type="text" readonly  value="{$data.signup_price}">
                    <input type="hidden" name="cha_id" value="{$cha_id}">

                </li>



                <if condition="!empty($cha_id)">
                    <li>
                        <i>总课时</i>
                        <input class="srk" type="text" readonly name="total_progress" value="{$data.total_progress}">
                    </li>
                    <li>
                        <i>剩余课时</i>
                        <input class="srk" type="text" readonly name="progress_sheng" value="{$data.progress_sheng}">
                    </li>
                    <li>
                        <i>当前课时</i>
                        <input class="srk" type="text" readonly name="progress" value="{$data.progress}">
                    </li>
                    <else/>
                </if>

                <li>
                    <input class="hidden" type="text" readonly name="class_id" value="{$data.id}">
                    <div >
                        <input  type="radio" name="discount_type" value="0" id="discount_type0" checked>
                        不使用优惠价 &nbsp; &nbsp;
                        <if condition="$course_data.is_year_one eq 1 && empty($cha_id)">
                            <input class="" type="radio" name="discount_type" value="1" id="discount_type1">活动优惠 &nbsp; &nbsp;
                        </if>

                        <if condition="$course_data.is_year_two eq 1 && count($enable_class) gt 0 && empty($cha_id)">
                            <input class="" type="radio" name="discount_type"  value="2" id="discount_type2">2册连报  &nbsp; &nbsp;
                        </if>
                        <if condition="$course_data.is_year_three eq 1 &&  count($enable_class) gt 1 && empty($cha_id)">
                            <input class="" type="radio" name="discount_type" value="3" id="discount_type3">3册连报  &nbsp; &nbsp;
                        </if>
                    </div>
                </li>
                <li id="award">

                </li>
                <li id="zhu">
                    <i>助学金</i>
                    <input class="srk" type="text" readonly value="0" id="help_awrad">
                    <input class="srk" type="hidden" readonly name="help_awrad" value="0" id="help_awrad1">

                </li>
                <li>
                    <input  type="checkbox" name="bill_status" value="1">
                    是否需要发票
                </li>
                <div style="display:none;" id="bill_status_info">
                    <li>
                        <input type="radio"  name='bill_type' id="personal" value="1" checked>个人&nbsp; &nbsp;
                        <input type="radio"  name='bill_type' id="company" value="2" >公司
                    </li>

                    <!--个人还是公司-->
                    <li class="company" style="display: none;">
                        <i>输入税号</i>
                        <input class="srk" type="text"  name="tax_code"   placeholder="请在此输入税号" id="">
                    </li>

                    <li class="company" style="display: none;">
                        <i>公司抬头</i>
                        <input class="srk" type="text"  name="payee"   placeholder="请在此输入您的发票抬头" id="">
                    </li>
                    <!--个人还是公司-->


                    <li>
                        <input type="radio"  name='obtain_type'  value="2" checked>教学点自取&nbsp; &nbsp;
                        <input type="radio"  name='obtain_type'  value="1" >快递到付
                    </li>

                    <!--自取还是快递-->
                    <div class="obtain_type" style="display:none;">
                        <li >
                            <i>收件人</i>
                            <input class="srk" type="text"  name="recipient"  placeholder="请在此输入收件人姓名" >
                        </li>
                        <li >
                            <i>联系电话</i>
                            <input class="srk" type="text"  name="phone"   placeholder="请在此输入收件人联系电话" >
                        </li>
                        <li >
                            <i>发票地址</i>
                            <input class="srk" type="text"  name="address"   placeholder="请在此输入您的发票地址" >
                        </li>
                    </div>
                    <!--自取还是快递end-->
                </div>
                <li></li>
                <li id="calculate_money" >
                    <span style="float:right;">
                        课程原价(元):
                        <em class="cal_price">0</em>
                        <br>

                        <!--插班显示减少费用-->
                        <if condition="!empty($cha_id)">
                            插班课程抵扣(元):
                            <em class="cha_reduce">0</em>
                            <br>
                        </if>
                        教材费(元):
                        <em class="incidental_price">{$data['incidental_price']}</em>
                        <br>
                        报名费(元):
                        <em class="signup_price">{$data['signup_price']}</em>
                        <br>

                        优惠减免(元):
                        <em class="cal_discount">0</em>
                        <br>
                        助学金减免(元):
                        <em class="cal_help">0</em>
                        <br>
                        奖学金/牛牛卡抵扣(元):
                        <em class="cal_award">0</em>
                        <br>
                        老学员报名费减免(元):
                        <em class="cal_signup">0</em>
                        <br>
                        应付金额(元):
                        <em class="cal_total">
                            0
                        </em>
                        <br>
                        <span class="wrong-attention">
                            <b class="fa fa-exclamation wrong-icon"  aria-hidden="true"></b>
                            支付金额最低为0元
                        </span>
                    </span>
                </li>
                <div class="clear"></div>

                <li style="text-align:center!important;">
                    <a class="order-btn" id="srk">
                        下一步
                    </a>
                </li>
            </ul>
        </div>

        <div class=" wrap" id="order_wrap" style="font-family:iconfont;">
                <div class="order-seat" style="width:100%;">
                    <!--黑板 -->
                    <div class="blackboard">
                        <img src="__TMPL__/public/html_assets/images/heiban.jpg" />
                    </div>
                    <!--黑板 -->

                    <!--座位 -->
                    <div id="seat-map">

                    </div>
                    <!--座位 -->
                </div>

                <div id="legend"  >
                    <div id="choose">
                        已选座位:
                        <span></span>
                    </div>
                </div>

                <div class="clear"></div>
                <!--选座位 -->
                <!--按钮 -->
                <input type="hidden" name="student_seat" value="" id="student_seat">


                    <div class="order-btn">
                        <button id="pre_button">上一步</button>
                        <button type="submit" class="js-ajax-submit" id="button">下一步</button>
                    </div>
                <!--按钮 -->
        </div>
    </form>

</div>



<include file="public@scripts"/>
<include file="public@footer"/>
<script src="__STATIC__/js/jquery.seat-charts.min.js"></script>

<script>
    jQuery(".class-campus ").slide({});

    $(function () {
        var org_price=parseFloat({$data['lesson_price']}); //课程价
        var one_reduce_price=parseFloat({$course_data['one_reduce_price']}); //优惠价
        var two_reduce_price=parseFloat({$course_data['two_reduce_price']});    //两年连报价
        var three_reduce_price=parseFloat({$course_data['three_reduce_price']}); //三年连报价
        var help_price=0; //助学金
        var cal_discount=0; //优惠减免
        var cal_signup_price=0; //助学金减免
        var cha_reduce=0; //插班减免
        var total_progress=1; //总课时
        var progress_sheng=1; //剩余课时
        var signup_price=parseFloat({$data['signup_price']}); //报名费
        var incidental_price=parseFloat({$data['incidental_price']}); //教材费

        //如果是插班;
        if ($('input[name="total_progress"]').val()){
             total_progress=$('input[name="total_progress"]').val();
             progress_sheng=$('input[name="progress_sheng"]').val();
             cha_reduce=(org_price/total_progress)*(total_progress-progress_sheng);
        }


        //初始化显示金额信息:对应原价/优惠减免/助学金减免/奖学金-牛牛卡抵扣/老学员减免报名费
        calculate_money(org_price,0,help_price,cal_discount,cal_signup_price,org_price-cha_reduce+signup_price+incidental_price,cha_reduce) ;


        //不使用优惠价
        $("#discount_type0").click(function()
        {
            cal_discount=0;
            $('#award>li>input').attr('checked',false);
            $('input[name="total_price"]').val(parseFloat({$data['lesson_price']}).toFixed(2));
            $("#award").find('li').show();
            cha_reduce=(org_price/total_progress)*(total_progress-progress_sheng);
            calculate_money(org_price,0,help_price,cal_discount,cal_signup_price,org_price-help_price-cal_discount-cal_signup_price-cha_reduce+signup_price+incidental_price,cha_reduce);
        })

        //使用一年优惠价
        $("#discount_type1").click(function()
        {
            $('#award>li>input').attr('checked',false);
            $('input[name="total_price"]').val(parseFloat({$course_data['one_reduce_price']}).toFixed(2));
            $("#award").find('li').hide();
            var b=org_price-one_reduce_price;
            cha_reduce=(one_reduce_price/total_progress)*(total_progress-progress_sheng);
            calculate_money(org_price,b,help_price,0,cal_signup_price,one_reduce_price-help_price-cal_signup_price-cha_reduce+signup_price+incidental_price,cha_reduce) ;
        })

        //使用二年优惠价
        $("#discount_type2").click(function()
        {
            $('#award>li>input').attr('checked',false);
            $('input[name="total_price"]').val(parseFloat({$course_data['two_reduce_price']}).toFixed(2));
            $("#award").find('li').hide();
            var a=org_price*2;
            var b=org_price*2-two_reduce_price;
            cha_reduce=(one_reduce_price/total_progress)*(total_progress-progress_sheng);
            calculate_money(a,b,help_price,0,cal_signup_price,two_reduce_price-help_price-cal_signup_price+signup_price+incidental_price,cha_reduce) ;
        })

        //使用三年优惠价
        $("#discount_type3").click(function()
        {
            $('#award>li>input').attr('checked',false);
            $('input[name="total_price"]').val(parseFloat({$course_data['three_reduce_price']}).toFixed(2));
            $("#award").find('li').hide();
            var a=org_price*3;
            var b=org_price*3-three_reduce_price;
            cha_reduce=(one_reduce_price/total_progress)*(total_progress-progress_sheng);
            calculate_money(a,b,help_price,0,cal_signup_price,three_reduce_price-help_price-cal_signup_price-cha_reduce+signup_price+incidental_price,cha_reduce) ;
        })

        //选择奖学金或者牛牛卡
        $('body').on('click','#award>li>input',function () {
            if($(this).is(':checked')){
                cal_discount=cal_discount+parseFloat($(this).parent('li').text().replace(/[^0-9]/ig,""))/100;
                calculate_money(org_price,0,help_price,cal_discount,cal_signup_price,org_price-help_price-cal_discount-cal_signup_price-cha_reduce+signup_price+incidental_price,cha_reduce);
            }else{
                cal_discount=cal_discount-parseFloat($(this).parent('li').text().replace(/[^0-9]/ig,""))/100;
                calculate_money(org_price,0,help_price,cal_discount,cal_signup_price,org_price-help_price-cal_discount-cal_signup_price-cha_reduce+signup_price+incidental_price,cha_reduce);
            }
        })




        $("body").on('change','#student_id',function()
        {

            $('#award').empty();
            $('#award>li>input').attr('checked',false);
            $("#discount_type0").click();

            var $student_id=$(this).find('option:selected').val();
            if($student_id==0)
            {
                return false;
            }
            //选择牛牛卡的动态

            $.ajax({
                url:"{:url('Order/ajax_student')}",
                type:'get',
                data:{'student_id':$student_id},
                success:function(data)
                {

                    data=jQuery.parseJSON(data);
                    console.log(data);

                    for(i in data)
                    {
                        $award_money=data[i].award_money;
                        $award_id=data[i].award_id;

                        if(data[i].card_type==1)
                        {
                            $("<li>" +
                                "<input  type='checkbox' name='award_money1[]' value="+$award_id+">"+
                                "&nbsp; &nbsp;牛牛卡:"+$award_money+"元"+
                                "</li>").appendTo($("#award"));
                        }
                        if(data[i].card_type==2)
                        {
                            $("<li>" +
                                "<input  type='checkbox' name='award_money2[]'  value="+$award_id+ ">"+
                                "&nbsp; &nbsp;奖学金:"+$award_money+"元"+
                                "</li>").appendTo($("#award"));
                        }

                    }

                },
                error:function()
                {
                    console.log('eoor');

                }
            })
            //助学金的动态
            $.ajax({
                url:"{:url('Order/ajax_help_awrard')}",
                type:'get',
                data:{'student_id':$student_id},
                success:function(data)
                {
                    data1=jQuery.parseJSON(data);
                    if(data1.money){
                        help_price=data1.money;
                        $("#help_awrad").val(parseFloat(data1.money).toFixed(2));
                        $("#help_awrad").text(data1.price);
                        $("#help_awrad1").val(data1.id);
                    }
                    else{
                        help_price=parseFloat(0).toFixed(2);
                        $("#help_awrad").val(0);
                        $("#help_awrad1").val(0);

                    }
                    if(data1.oldstudent==1){
                        cal_signup_price=parseFloat({$data['signup_price']});
                    }else{
                        cal_signup_price=0;
                    }
                    calculate_money(org_price,0,help_price,0,cal_signup_price,org_price-help_price-cal_signup_price-cha_reduce+signup_price+incidental_price,cha_reduce) ;

                },
                error:function()
                {
                    console.log('eoor');

                }
            })

        })

    })
    $("body").on('click',"input[name='discount_type']",function(e)
    {
        groupCheckbox = $("input[name='discount_type']"); //如果使用奖学金
        for(i=0;i<groupCheckbox.length;i++) {
            if (groupCheckbox[0].checked) {
                $("#zhu").show(); //一个选中的话
            }else{
                $("#zhu").hide(); //一个选中的话
            }
        }

    })

    //对应显示课程原价(org),优惠减免(a),助学金减免(b),奖学金(c),,老学员(d),应付(tot),插班减免(e)
    function calculate_money(org,a,b,c,d,tot,e) {
        $('.cal_price').text(parseFloat(org).toFixed(2));
        $('.cal_discount').text('-'+parseFloat(a).toFixed(2));
        $('.cal_help').text('-'+parseFloat(b).toFixed(2));
        $('.cal_award').text('-'+parseFloat(c).toFixed(2));
        $('.cal_signup').text('-'+parseFloat(d).toFixed(2));

        //        支付金额最低为0提示
        if(tot<0){
            $('.wrong-attention').show();
            tot=0;
        }else{
            $('.wrong-attention').hide();
        }

        $('.cal_total').text(parseFloat(tot).toFixed(2));


        if ($('.cha_reduce')){
            $('.cha_reduce').text('-'+parseFloat(e).toFixed(2));
        }
    }


//以下为选座相关JS
    set_seat();
    //加载座位小图标
    $('.seatCharts-seat').html('&#xe612;');

    set_column();

//   设置列数为字母
    function set_column() {
        var obj=$('.seatCharts-header>.seatCharts-cell:not(:first)');
        var length=obj.length;
        for (var i=0;i<length;i++){
            if(obj[i].innerHTML>26){
                console.log('超出最大列数Z(26)');
                return false;
            }else{
                obj[i].innerHTML=String.fromCharCode(parseInt(obj[i].innerHTML)+64);
            }
        }
    }

    function set_seat() {
        var row = {$seat_data[0]['rows']};
        var column = {$seat_data[0]['cols']};
        var aisle = "{$seat_data[0]['aisle']}";
        if(aisle) aisle=aisle.split(',');
        var vip = "{$seat_data[0]['vip']}";
        if(vip) vip=vip.split(',');
        var student_seat = "{$seat_data[0]['student_seat']}";
        if(student_seat) student_seat=student_seat.split(',');
        var reserved_seats = "{$seat_data[0]['reserved_seats']}";
        if(reserved_seats) reserved_seats=reserved_seats.split(',');
        var new_map = [];
        if (row && column) {
            //根据行列初步生成座位表的map
            for (var i = 0; i < row; i++) {
                new_map[i] = '';
                for (var j = 0; j < column; j++) {
                    new_map[i] += 'a';
                }
            }
        }

        sc = $('#seat-map').seatCharts({
            map: new_map,
            naming: {
                top: true,
                getLabel: function (character, row, column) {
                    return column;
                }
            },
            legend: { //定义图例
                node: $('#legend'),
                items: [
                    ['a', 'available', '可选座位'],
                    ['a', 'selected', '已选座位'],
                    ['a', 'unavailable', '已售座位'],
                    ['a', 'parentseats', '家长座位']
                ]
            },
            click: function () {
                if (this.status() == 'available') {
                    sc.find('selected').status('available');
                    $("#student_seat").val(this.settings.id);

//                    显示已选座位
                    $('#choose>span').remove();
                    $('<span>'+(this.settings.row+1)+'排'+
                        String.fromCharCode(this.settings.label+64)
                        +'座</span>')
                        .attr('id', 'cart-item-'+this.settings.id)
                        .data('seatId', this.settings.id)
                        .appendTo($('#choose'));
                    return 'selected';
                } else if (this.status() == 'selected') {
                    $("#student_seat").val('');
                    $('#cart-item-'+this.settings.id).remove();
                    return 'available';
                } else {
                    return this.style();
                }
            }
        });


        if(aisle){
            sc.get(aisle).status('aisles');
        }
        if(vip){
            sc.get(vip).status('parentseats');
        }
        if(student_seat){
            sc.get(student_seat).status('unavailable');
        }
        if(reserved_seats){
            sc.get(reserved_seats).status('unavailable');
        }

    }
//点击生成订单的下一步,切换标签
    $("body").on('click','#srk',function(){
        $tid=$("#student_id").val();
        if($tid==0)
        {
            Wind.use('noty', function () {
                noty({
                    text: "请选择孩子",
                    type: 'error',
                    layout: 'center'
                });
            });
            return false;
        }
        //验证发票信息,如果确定要发票
        if($('input[name="bill_status"]').attr('checked')=='checked') {
            //确定是公司抬头
            if ($('input[name="bill_type"]:checked').val() == 2) {
                var $tax = $('input[name="tax_code"]').val();
                var $payee = $('input[name="payee"]').val();
                if (!$tax || !$payee) {
                    Wind.use('noty', function () {
                        noty({
                            text: "请输入税号和公司抬头",
                            type: 'error',
                            layout: 'center'
                        });
                    });
                    return false;

                }

            }
            //确定是邮寄
            if ($('input[name="obtain_type"]:checked').val() == 1) {
                var $recipient = $('input[name="recipient"]').val();
                var $phone = $('input[name="phone"]').val();
                var $address = $('input[name="address"]').val();
                if (!$recipient || !$phone || !$address) {
                    Wind.use('noty', function () {
                        noty({
                            text: "请输入快递相关信息",
                            type: 'error',
                            layout: 'center'
                        });
                    });
                    return false;

                }
            }

        }
        $("#order_wrap").css('display','block');
        $("#order_list").css('display','none');
        $(".step").find(".now").removeClass('now').next('li').addClass('now');

        return false;
    });

    $('body').on('click','#pre_button',function(){
        $("#order_wrap").css('display','none');
        $("#order_list").css('display','block');

        $(".step").find(".now").removeClass('now');
        $(".step>ul>li:first").addClass('now');
        return false;

    });

    //发票操作
    //要不要发票;
    $('input[name="bill_status"]').click(function(){
        $('#bill_status_info').toggle(300);
    })
    //发票类型;
    $('input[name="bill_type"]').click(function () {
        if($(this).val()==1){
            $('.company').hide(300);
            $('.company').find('input').val('');
        }else if($(this).val()==2){
            $('.company').show(300);
        }
    })
    //发票获取方式;
    $('input[name="obtain_type"]').click(function () {
        if($(this).val()==2){
            $('.obtain_type').hide(300);
            $('.obtain_type').find('input').val('');
        }else if($(this).val()==1){
            $('.obtain_type').show(300);
        }
    });


</script>


</body>
</html>